<template>
	<ul class="list">
		<li :class="`item${index + 1}`" v-for="(item, index) in staffInfo" :key="item.graid">
			<div class="raduis">{{ item.staff }}</div>

			<div class="number"><CountTo :startVal="0" :endVal="item.number" :duration="2000" /> 名</div>
		</li>
	</ul>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { CountTo } from 'vue3-count-to'
import { getStuCount, getHouCount } from '@/utils/axios/getTotal'

const staffInfo = reactive([
	{
		staff: '学生',
		number: 123,
	},
	{
		staff: '宿管',
		number: 123,
	},
	{
		staff: '后勤',
		number: 7,
	},
])

onMounted(async () => {
	let stu = await getStuCount()
	let domi = await getHouCount()

	staffInfo[0].number = stu.data
	staffInfo[1].number = domi.data
})
</script>

<style scoped lang="scss">
$radu-width: 50px;
li%base {
	box-shadow: 0 0 3px #cccc;
	padding: 10px;
	position: relative;
	display: flex;
	gap: 30px;
	align-items: center;
	.sex {
		font-size: 18px;
		font-style: italic;
	}

	.raduis {
		width: $radu-width;
		line-height: calc($radu-width - 10px);
		height: $radu-width;
		text-align: center;
		border-radius: 50%;
		padding: 5px;
	}
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		display: block;
	}
}
.list {
	padding: 20px;
	width: 80%;
	height: 60%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 20px;

	margin: auto;

	.item1 {
		@extend %base;
		background-color: rgba(74, 183, 255, 0.215);
		&::before {
			border: 3px solid rgb(74, 183, 255);
		}
		.raduis {
			background-color: rgba(74, 183, 255, 0.1);
		}
	}
	.item2 {
		@extend %base;
		background-color: rgba(255, 123, 71, 0.215);
		&::before {
			border: 3px solid rgb(255, 123, 71);
		}
		.raduis {
			background-color: rgba(255, 123, 71, 0.1);
		}
	}
	.item3 {
		@extend %base;
		background-color: rgba(51, 203, 160, 0.215);
		&::before {
			border: 3px solid rgb(51, 203, 160);
		}
		.raduis {
			background-color: rgba(51, 203, 160, 0.1);
		}
	}
	.item4 {
		@extend %base;
		background-color: rgba(150, 105, 255, 0.215);
		&::before {
			border: 3px solid rgb(150, 105, 255);
		}
		.raduis {
			background-color: rgba(150, 105, 255, 0.1);
		}
	}
}
</style>
